<template>
  <div>
    <div v-if="orderList==null||orderList.length==0" style="text-align: center;">
      <h1>无待接单订单信息</h1>
    </div>
    <div v-for="o in orderList" style="margin-top: 20px;background-color: #fff4ee;text-align: center;">
      <div>
        <el-row>
          <el-col :span="4">
            <div>
              <div>
                订单编号
              </div>
              <div class="order_text">
                {{o.orderId}}
              </div>
            </div>
          </el-col>
          <el-col :span="2">
            <div>
              取货时间
            </div>
            <div class="order_text">
              {{o.takeTime}}
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              地址
            </div>
            <div class="order_text">
              {{o.address}}
            </div>
          </el-col>
          <el-col :span="2">
            <div>
              预估总价
            </div>
            <div class="order_text" style="font-weight: bold;color: #ff5500;font-size: 15px;">
              {{o.orderPrice.toFixed(2)}}&nbsp;￥
            </div>
          </el-col>
          <!-- <el-col :span="2">
            <div>
              重量
            </div>
            <div class="order_text">
              {{o.weight}}&nbsp;kg
            </div>
          </el-col> -->
          <el-col :span="3">
            <div>
              出货人联系方式
            </div>
            <div class="order_text">
              {{o.orderPhone}}
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              订单备注
            </div>
            <div class="order_text">
              {{o.remarks}}
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              物品图片信息
            </div>
            <div>
              <template v-if="o.goodsPhotos && o.goodsPhotos.length > 0">
                <el-image style="width: 80px; height: 80px" :src="o.goodsPhotos[0]" :preview-src-list="o.goodsPhotos">
                </el-image>
              </template>
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              操作
            </div>
            <div class="order_text">
              <el-button size="mini" style="width: 80px;" @click="takeOrder(o.orderId)">接单</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="text-align: center;">
        <el-collapse>
          <el-collapse-item title="查看订单物品详情" style="text-align: center;">
            <div v-for="d in o.orderDetailsDTOList" style="border-bottom: 1px solid #dfe4ea;">
              <el-row>
                <el-col :span="4">
                  <div>
                    种类
                  </div>
                  <div class="order_details_text">
                    {{d.kindName}}
                  </div>
                </el-col>
                <el-col :span="4">
                  <div>
                    名称
                  </div>
                  <div class="order_details_text">
                    {{d.name}}
                  </div>
                </el-col>

                <el-col :span="4">
                  <div>
                    详情图
                  </div>
                  <div>
                    <el-image style="width: 80px; height: 80px" :src="o.photo">
                    </el-image>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div>
                    重量&数量
                  </div>
                  <div class="order_details_text">
                    {{d.weight}}&nbsp;{{d.units}}
                  </div>
                </el-col>
                <el-col :span="4">
                  <div>
                    ￥/{{d.units}}
                  </div>
                  <div class="order_details_text">
                    {{d.unitPrice}}
                  </div>
                </el-col>
                <el-col :span="4">
                  <div>
                    总价
                  </div>
                  <div class="order_details_text" style="font-weight: bold;color: #ff5500;font-size: 15px;">
                    {{d.price.toFixed(2)}}&nbsp;￥
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>


      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        orderList: [], //待接单的集合
        pageNum: 1,
        pageSize: 11,
      }
    },
    methods: {
      takeOrder(orderId) {
        this.$http.post("/order/recycleOrder/siteTakeOrder.site?orderId=" + orderId).then(resp => {
          if (resp.data.flag) {
            alert(resp.data.message)
            this.getOrderTaking()
          } else {
            alert(resp.data.message)
          }
        })
      },
      getOrderTaking() {
        this.$http.post("/order/recycleOrder/siteGetNoTokenOrder.site", {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }).then(resp => {
          if (resp.data.flag) {
            this.orderList = resp.data.data
            console.log(resp.data.data)
          } else {
            alert(resp.data.message)
          }
        })
      }
    },
    created() {
      this.getOrderTaking()
    }
  }
</script>

<style>
  .order_details_text {
    margin-top: 15px;
  }

  .order_text {
    margin-top: 15px;
    font-size: 12px;
  }
</style>
